<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <el-select v-model="model1" style="width:100%" @change="handleSelectType1">
        <el-option v-for="(item,index) in conditions[0]" :label="item.name" :value="item.id" :key="index.toString()"></el-option>
      </el-select>
    </el-col>
    <el-col :span="4">
      <el-select v-model="model2" style="width:100%" @change="handleSelectType2">
        <el-option v-for="(item,index) in options2" :label="item.name" :value="item.fieldName" :key="index.toString()"></el-option>
      </el-select>
    </el-col>
    <el-col :span="3">
      <el-select v-model="pattern" style="width:100%">
        <el-option label="等于" :value="1"></el-option>
        <el-option label="不等于" :value="2"></el-option>
        <el-option v-if="conType!==2" label="包含" :value="3"></el-option>
        <el-option v-if="conType!==2" label="不包含" :value="4"></el-option>
        <el-option v-if="conType!==2" label="小于" :value="5"></el-option>
        <el-option v-if="conType!==2" label="大于" :value="6"></el-option>
      </el-select>
    </el-col>
    <el-col :span="10">
      <el-select v-if="conType===2" v-model="content" style="width:100%">
        <el-option v-for="item,index in options3" :label="item.name" :value="item.enumStr" :key="item.id.toString()"></el-option>
      </el-select>
      <el-input-number v-else-if="conType===3" v-model="content"></el-input-number>
      <el-date-picker v-else-if="conType===4"
        v-model="content"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
      <el-date-picker
        v-else-if="conType===5"
        v-model="content"
        type="datetime"
        placeholder="选择日期时间"
        format="yyyy-MM-dd HH:mm:ss"
        align="right">
      </el-date-picker>
      <el-input v-else v-model="content"></el-input>
    </el-col>
    <i :class="{'el-icon-circle-close':!closeHover, 'el-icon-error': closeHover, removeCondition: true}" @click="handleRemove" @mouseenter="closeHover=true" @mouseout="closeHover=false"></i>
  </el-row>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import bus from '@/components/common/eventBus'
  export default {
    props: ['condition', 'index'],
    data () {
      return {
        model1: '',
        model2: '',
        options2: [],
        options3: [],
        pattern: null,
        conType: 1,
        content: '',
        closeHover: false
      }
    },
    mounted () {
      this.initComponent()
    },
    watch: {
      pattern (val) {
        this.condition.pattern = val
      },
      content (val) {
        if (this.conType === 4) {
          this.condition.content = this.$date.format(new Date(val), 'YYYY-MM-DD')
        } else if (this.conType === 5) {
          this.condition.content = this.$date.format(new Date(val), 'YYYY-MM-DD HH:mm:ss')
        } else {
          this.condition.content = val
        }
      },
      model2 (val, old) {
        this.condition.fieldName = val
        if (val !== old && old) {
          this.condition.ifClear = true
        }
      },
      condition () {
        this.initComponent()
      }
    },
    computed: {
      ...mapState({
        conditions: state => state.cusManage.conditions // conditions 为select的option
      })
    },
    methods: {
      ...mapActions(['getConditions']),
      initComponent () {
        this.model1 = this.condition.pid && +this.condition.pid
        this.model2 = this.condition.fieldName
        this.pattern = this.condition.pattern
        this.content = this.condition.content
      },
      // 选择分类1
      handleSelectType1 (val) {
        this.condition.pid = val
        this.getConditions(val)
          .then(() => {
            this.options2 = this.conditions[1]
            if (!this.options2.filter(item => item.fieldName === this.condition.fieldName).length) { // 如果model2不在option2中，则清空
              this.model2 = null
              this.pattern = null
              this.content = null
            } else {
              this.handleSelectType2(this.model2, false)
            }
          })
      },
      // 选择分类2
      handleSelectType2 (val) {
        if (this.condition.ifClear) {
          this.content = null
        }
        let objArr = this.options2.filter(obj => obj.fieldName === val)
        let conType = objArr.length ? objArr[0].conType : ''
        this.conType = conType
        if (conType === 2) {
          this.getConditions(objArr[0].id)
            .then(() => {
              this.options3 = this.conditions[1]
              if (!this.options3.filter(item => item.enumStr === this.condition.content).length) {
                this.content = null
              }
            })
        }
      },
      // 移除条件
      handleRemove () {
        bus.$emit('removeCondition', this.index)
      }
    }
  }
</script>
